<!doctype html>
<style>
body,p,#a {margin:0}
p {
	width: 150px;
	height: 100px;
	display: inline-block;
	margin-left: 20px;
}
#a { background: repeating-linear-gradient(magenta 0 20px, purple 20px 40px); }
#b { background: repeating-radial-gradient(magenta 0 20px, purple 20px 40px); }
#c { background: repeating-conic-gradient(magenta 0 20deg, purple 20deg 40deg); }
</style>

<p id=a>
<p id=b>
<p id=c>